import TestCallBack from "./usecallBack/testCallBack";
import TestMemo from "./useMemo/testMemo";
import Refs from './userRef/refs'
import Home from './routes/home'
import About from './routes/about'
import Users from './routes/users'
import Test from './routes/test'
import Css from './css/index.css';

import React from "react";
import {
   //路由器（历史路由）
  BrowserRouter as Router,
  //当路径匹配成功后，则不继续往下匹配  
  Switch,
  //路由规则 （一个url地址对象一个组件）
  Route,
  //理解为一个a标签（随便写了Link 最后会被编译成a标签）
  Link
} from "react-router-dom";



function App() {
  return (
    <Router> 
      {/*  <TestMemo/> */}
      {/*  <TestCallBack/> */}
      {/* <Refs></Refs> */}
      {/* 一个应用只有一个路由器 */}
     <div className='container'>
           <div className="leftDiv">
           <ul>
             <li>
               <Link to='/home'>主页(home)</Link>
             </li>
             <li>
             <Link to='/about'>关于(about)</Link>
             </li>
             <li>
             <Link to='/users'>用户界面(users)</Link>
             </li>
             <li>
            {/*  <Link to='/home/test'>测试界面(test)</Link> */}
            <Link to='/home/test?id=10&name=张三'>测试界面(test)</Link> 
             </li>
            </ul>
           </div>
         <div className="rightDiv">
              <Switch>
              {/* 路由规则 
              path 必须与上面的link中to 相同
              */}
              //exact 精确匹配
             {/*  <Route path="/home" exact >
                {/* 一般组件的写法，如果是路由组件不能使用这样的写法*/}
                 {/*  <Home name="test"></Home> */}
             {/*  </Route> */} 
             {/*  <Route path="/home">
                  <About></About>
              </Route> */}
                <Route path="/home" component={Home}></Route>
              <Route path="/home/test" component={Test}></Route>
              <Route path="/about" component={About}></Route>
              <Route path="/users" component={Users}></Route>
             
               </Switch> 
             </div>
             
        </div> 
      </Router>  
  );
}


export default App;
